<template>
	<view>
		<u-navbar :title="title" :status-bar="false" safe-area-inset-top :placeholder="true" :autoBack="true">
		</u-navbar>
		<view class="form">
			<u--form :model="form" :key="key" :rules="rules" labelWidth="auto" ref="uForm">
				<u-form-item label="账户类型：" required borderBottom>
					<view style="width: 100%;text-align: right;">公户</view>
				</u-form-item>
				<u-form-item label="开户名称：" prop="accountName" required borderBottom>
					<u--input border="none" readonly v-model="form.accountName" inputAlign="right"
						placeholder="请输入开户名称"></u--input>
				</u-form-item>
				<u-form-item label="银行卡号：" prop="bankCardNo" required borderBottom>
					<u--input border="none" v-model="form.bankCardNo" inputAlign="right" placeholder="请输入账号"></u--input>
				</u-form-item>
				<u-form-item label="银行名称：" prop="bankName" required borderBottom>
					<u--input border="none" v-model="form.bankName" inputAlign="right" placeholder="请输入银行名称，如：招商银行"></u--input>
				</u-form-item>
				<u-form-item label="开 户 行：" prop="bankBranch" required borderBottom>
					<u--input border="none" v-model="form.bankBranch" inputAlign="right"
						placeholder="请输入开户行名称，如：芜湖分行营业部"></u--input>
				</u-form-item>
				<u-form-item label="联系人姓名：" prop="contactName" required borderBottom>
					<u--input border="none" v-model="form.contactName" inputAlign="right" placeholder="请输入联系人姓名"></u--input>
				</u-form-item>
				<u-form-item label="联系人手机号：" prop="contactPhone" required borderBottom>
					<u--input border="none" v-model="form.contactPhone" :maxlength="11" inputAlign="right"
						placeholder="请输入联系人手机号"></u--input>
				</u-form-item>
			</u--form>
			<view class="btn-view">
				<view class="btn" @click="submit">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				currentType: "",
				form: {
					accountName: "",
					bankCardNo: "",
					bankName: "",
					bankBranch: "",
					contactName: "",
					contactPhone: "",
				},
				realAuthInfo: null,
				key: 0,
				rules: {
					accountName: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					bankCardNo: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					bankName: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					bankBranch: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					contactName: [{
						required: true,
						message: '请填写必填项',
						trigger: ['blur', 'change']
					}],
					contactPhone: [{
							required: true,
							message: '请填写必填项',
							trigger: ['blur', 'change'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// 就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},
		methods: {
			getById(id) {
				this.api.getBankAccountById(id).then(res => {
					console.log(res);
					delete res.data.data.accountName;
					this.form = res.data.data;
				})
			},
			submit() {
				this.$refs.uForm.validate().then((valid) => {
					console.log(valid);
					if (valid) {
						if (this.currentType == "add") {
							uni.showLoading({
								title: "加载中",
								mask: true
							})
							this.api.addBankAccount(this.form).then(res => {
								if (res.data.code == 200) {
									uni.$u.toast("添加成功");
									uni.$emit('refreshPage');
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 800)
								}
							}).finally(() => {
								uni.hideLoading()
							})
						}
						if (this.currentType == "edit") {
							uni.showLoading({
								title: "加载中",
								mask: true
							})
							this.api.editBankAccount(this.form).then(res => {
								if (res.data.code == 200) {
									uni.$u.toast("修改成功");
									uni.$emit('refreshPage');
									setTimeout(() => {
										uni.navigateBack()
									}, 800)
								}
							}).finally(() => {
								uni.hideLoading()
							})
						}
					}
				})
			},
			async realAuthDetail() {
				let result = await this.api.realAuthDetail();
				return result.data.data;
			},
		},
		onReady() {},
		async onLoad(options) {
			let that = this;
			this.currentType = options.type;
			if (this.currentType == 'edit') {
				await this.getById(options.id);
			}
			this.realAuthInfo = await this.realAuthDetail();
			this.form.accountName = this.realAuthInfo.name;
			this.title = this.currentType == 'add' ? '添加账号' : '修改账号';
		},
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.form {
		margin: 20rpx;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.btn-view {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0rpx;
		margin-top: 80rpx;
	}

	.btn {
		width: 80%;
		background-color: #2979ff;
		color: #fff;
		padding: 20rpx 0rpx;
		text-align: center;
		border-radius: 50rpx;
	}
</style>